<template>
  <a-menu class="custom-header" :dashed="false" v-model:selectedKeys="current" mode="horizontal" :items="items" :selectable="false"/> 
</template>
<script lang="ts" setup>
import { h, ref } from 'vue';
   
import listImg0 from "../../assets/header/f0.png"
 
const current = ref<string[]>(['0']);
 
const items = ref([
  
{
    key: 'sub1',
    icon: () => h('img',{width:12,height:12,src:listImg0},{}),
    label: '文件',
    title: '文件',
    children: [
      {
        key: '1',
        label: '最近文件',
        title: '',
      },
      {
        key: '2',
        label: '打开',
        title: '',
      },
      {
        key: '3',
        label: '另存为',
        title: '',
      },
      {
        key: '3',
        label: '打印',
        title: '',
      },
      {
        key: '4',
        label: '关闭',
        title: '',
      },
      {
        key: '5',
        label: '模型重命名',
        title: '',
      },
      
      {
        key: 'sub1-2',
        label: '模型文件',
        title: '',
        children: [
          {
            key: '7',
            label: '单位',
            title: '',
          },
          {
            key: '8',
            label: '精度',
            title: '',
          },
          {
            key: '9',
            label: '材质',
            title: '',
          } 
          ,
          {
            key: '10',
            label: '模型文件大小',
            title: '',
          } 
          ,
          {
            key: '11',
            label: '版本',
            title: '',
          } ,
          {
            key: '12',
            label: '标题',
            title: '',
          } ,
          {
            key: '13',
            label: '标记',
            title: '',
          } ,
          {
            key: '14',
            label: '备注',
            title: '',
          } ,
          {
            key: '15',
            label: '作者',
            title: '',
          }  ,
          {
            key: '16',
            label: '上次修改者',
            title: '',
          }  ,
          {
            key: '17',
            label: '创建时间',
            title: '',
          } ,
          {
            key: '18',
            label: '上次修改时间',
            title: '',
          }  
        ],
      },
      {
        key: '6',
        label: '共享',
        title: '',
      },
    ],
  },
   
]);
</script>
<style>
:where(.css-dev-only-do-not-override-eq3tly).ant-menu-horizontal {
  border-bottom: none !important;
}
/* 隐藏激活子菜单的下划线 */
.ant-menu-submenu-active{
  border-bottom: none !important;
  text-decoration: none!important;
}
.custom-header .ant-menu-submenu-active::after{
  border: none!important;
  outline: none;
}
.ant-menu-submenu-selected::before{ 
  border-bottom-width: 0px;
    border-bottom-color: white;
} 
.ant-menu-submenu-selected::after{ 
  border-bottom-width: 0px;
    border-bottom-color: white;
} 
.ant-menu-submenu::after {
    position: absolute;
    inset-inline: 16px;
    bottom: 0;
    border-bottom: 0px solid transparent !important;
    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 0);
    content: "";
}
</style>
